<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .circle {
            height: 400px;
            width: 400px;
            margin: 100px auto;
            border: 10px solid gray;
            position: relative;
            border-radius: 200px;
            display: none;
            transform: scale(1);
        }

        .circle .numberbox {
            position: absolute;
            height: 40px;
            width: 10px;
            top: -10px;
            left: 185px;
        }

        .circle .numberbox > div {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: gray;
            transform-origin: 5px 200px;
        }

        .circle .numberbox > div:nth-child(1) {
            transform: rotate(30deg);
        }

        .circle .numberbox > div:nth-child(2) {
            transform: rotate(60deg);
        }

        .circle .numberbox > div:nth-child(3) {
            transform: rotate(90deg)
        }

        .circle .numberbox > div:nth-child(4) {
            transform: rotate(120deg);
        }

        .circle .numberbox > div:nth-child(5) {
            transform: rotate(150deg);
        }

        .circle .numberbox > div:nth-child(6) {
            transform: rotate(180deg);
        }

        .circle .numberbox > div:nth-child(7) {
            transform: rotate(210deg);
        }

        .circle .numberbox > div:nth-child(8) {
            transform: rotate(240deg);
        }

        .circle .numberbox > div:nth-child(9) {
            transform: rotate(270deg);
        }

        .circle .numberbox > div:nth-child(10) {
            transform: rotate(300deg);
        }

        .circle .numberbox > div:nth-child(11) {
            transform: rotate(330deg);
        }

        .circle .hour {
            position: absolute;
            top: 120px;
            left: 181px;
            height: 70px;
            width: 18px;
            background-color: greenyellow;
            transform-origin: bottom center;
        }

        .circle .minute {
            position: absolute;
            top: 80px;
            left: 184px;
            height: 110px;
            width: 12px;
            background-color: deepskyblue;
            transform-origin: bottom center;
        }

        .circle .second {
            position: absolute;
            top: 20px;
            left: 187px;
            height: 170px;
            width: 6px;
            background-color: gray;
            transform-origin: bottom center;
        }

        .circle .center {
            position: absolute;
            margin-top: 178px;
            margin-left: 178px;
            width: 24px;
            height: 24px;
            border-radius: 12px;
            background-color: gray;
        }
    </style>
</head>
<body>
<div class="circle" id="circle">
    <div class="numberbox">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="hour" id="hour"></div>
    <div class="minute" id="minute"></div>
    <div class="second" id="second"></div>
    <div class="center"></div>
</div>
<script>
    window.onload = function () {
        let date = new Date();
        let second = date.getSeconds() * 6;
        let minute = date.getMinutes() * 6;
        let hour = date.getHours() % 12 * 30 + date.getMinutes() * 0.5;

        function secondfunc() {
            second += 6;
            document.getElementById("second").style.cssText = "transform: rotate(" + second + "deg)";
            if (second % 360 === 0) {
                minute += 6;
                hour += 0.5;
                timefunc();
            }
        }

        function timefunc() {
            document.getElementById("minute").style.cssText = "transform: rotate(" + minute + "deg)";
            document.getElementById("hour").style.cssText = "transform: rotate(" + hour + "deg)";
        }

        document.getElementById("circle").style.display = "block";
        secondfunc();
        timefunc();
        window.setInterval(function () {
            secondfunc()
        }, 1000);
    }
</script>
</body>
</html>